/* Définition des styles de base pour le HTML et le BODY */
html, body {
	font-family: raleway, sans-serif;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

/* Définition des styles pour le BODY */
body {
	display: flex;
	background-color: #1a1e23;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	overflow: hidden;
}

/* Définition des styles pour la boîte de recherche */
.srx-box {
	position: absolute;
	font-size: 20px;
	border: solid .25em #fff;
	display: inline-block;
	position: relative;
	border-radius: 2.5em;
}

/* Définition des styles pour le champ de recherche */
.src-box input[type=text] {
	font-family: inherit;
	font-weight: bold;
	color: #fff;
	width: 2.5em;
	height: 2.5em;
	background-color: transparent;
	border: .25em solid white;
	box-sizing: border-box;
	border-radius: 2.5em;
	transition: width 800ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 150ms;
}


/* Définition des styles pour le champ de recherche en état de focus */
.src-box input[type=text]:focus {
	outline: none;
}

/* Définition des styles pour le champ de recherche en état de focus ou de remplissage */
.src-box input[type=text]:focus,
.src-box input[type=text]:not(:placeholder-shown) + button[type=reset] {
	width: 18em;
	transition: width 800ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}


/* Définition des styles pour le bouton de réinitialisation */
.src-box input[type=text]:focus + button[type=reset],
.src-box input[type=text]:not(:placeholder-shown) + button[type=reset] {
	transform: rotate(90deg) translateY(0);
	transition: transform 150ms ease-out 800ms;
}

/* Définition des styles pour l'icône du bouton de réinitialisation */
.src-box input[type=text]:focus + button[type=reset]::after,
.src-box input[type=text]:not(:placeholder-shown) + button[type=reset]::after {
	opacity: 1;
	transition: top 150ms ease-out 950ms,
	            right 150ms ease-out 950ms,
	            opacity 150ms ease 950ms;
}

/* Définition des styles pour le bouton de réinitialisation */
.src-box button[type=reset] {
	background-color: transparent;
	width: 1.4em;
	height: 1.4em;
	border: 0;
	padding: 0;
	outline: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 51.19%;
	left: 50.5%;
	rotate: -45deg ;
	transition: transform 150ms ease-out 150ms;
}

/* Définition des styles pour les barres de l'icône du bouton de réinitialisation */
.src-box button[type=reset]::before,
.src-box button[type=reset]::after {
	content: "";
	background-color: #fff;
	width: .3em;
	height: 1.4em;
	border-radius: 10px;
	position: absolute;
}

/* Définition des styles pour l'icône de réinitialisation */
.src-box button[type=reset]::after {
	transform: rotate(90deg);
	opacity: 0;
	transform: transform 150ms ease-out, opacity 150ms ease-out;
}